<template>
	<view class="login-modal">
		<view  class="modal-bg" :style="{zIndex:zindex}"></view>
		<view class="modal-box animated fast" :style="{zIndex:zindex+1,background:bg}" :class="show   ? 'slideInUp' : 'slideOutDown'">
			<view class="modal-main">
				<view class="closed">
					<text @click="closed()" class="iconfont  ft20 cl-notice iconbtn_close"></text>
				</view>
				<view class="lh20 ft16 cl-main ftw600 text-center">少儿启智营</view>
				<view  class="mt60">
						<!-- <view class="text-center ft14 cl-main">
							点击登录 享受更多会员特惠
						</view> -->
						<!-- <view class="plr30 mt40 flex alcenter center">
							<button open-type="getUserInfo" @getuserinfo="getUserInfo"
								class="btn-big"  :style="getBtnStyle" 
								>微信登录</button>
						</view> -->
						<view class="plr30 mt40">
							<button  open-type="getPhoneNumber"  @getphonenumber="getUserPhoneNumber"
								class="btn-big" :style="getBtnStyle">
								授权手机号
								<!-- <text class="iconfont iconicon_weixin mr10 ft20">微信授权手机号</text> -->
							</button>
							<!-- <button open-type="openProfile"></button> -->
						</view>
				</view>
			
						
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export  default{
		props:{
			zindex:{
				type:Number,
				default:402,
			},
			bg:{
				type:String,
				default:'#ffffff',
			},
			
		},
		data(){
			return {
				show:true,
				// 用户凭证
				code: new String(),
				userinfo:{},
				mdata:'',
				miv:'',
				step:1, // 1
			}
		},
		async created(){
			this.code = await this.getAppCode()
		},
		methods:{
			
			saveInfoToLocal(){
				uni.setStorage({//缓存配置信息
					key: 'userinfo',  
					data: this.userinfo
				}),
				uni.setStorage({//缓存配置信息
					key: 'apiToken',  
					data: this.userinfo.apiToken
				})
				
				this.show = false
				this.closed()
				
				
			},
			login(detail){
				console.log("detail")
				console.log(detail)
				var this_ = this
				uni.request({
					  url: this.configs.webUrl+'/wxmini/login/getPhoneByCode',  
					  method:'GET',  
					  data: {   
						  code: this.code,                        //wx.login 登录成功后的code
						  encryptedData: detail.encryptedData,
						  iv: detail.iv,
					  },  
					  success: (cts) => {  
							console.log('后台服务wxmini-login -res')
							console.log(cts.data)
							if(cts.data.code==200){
								this.userinfo = cts.data.data 
								console.log("this.userinfo")
								console.log(this.userinfo)
								uni.showModal({
									title: '温馨提示',
									content: '授权成功',
									showCancel: false,
									confirmText: "确定",
									success: function (res) {
										if (res.confirm) {
											this_.saveInfoToLocal()
										} else if (res.cancel) {
											
										}
									}
								});
							}else{
							  uni.showModal({
								title: '温馨提示',
								content: JSON.stringify(cts.data),
								showCancel: false,
								confirmText: "确定",
								success: function (res) {
									if (res.confirm) {
										// uni.navigateBack();
									} else if (res.cancel) {
										
									}
								}
							  });
						  }
					  },
					  fail: (err1) => {
						console.log(err1);
							uni.hideLoading();
					  }
				});
			},
			getUserPhoneNumber(event) {
				if(event.detail.errMsg !== 'getPhoneNumber:ok') return
				uni.showToast({
					title: '登录中',
					icon: 'loading',
					mask: true
				})
				console.log("getUserPhoneNumber.event",event)
				this.login(event.detail)
			},
			// 获取code
			getAppCode() {
				return new Promise((resolve, reject) => {
					// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin',
						success(res) {
							resolve(res.code)
						},
						fail(err) {
						  reject(err)
						}
					})
					// #endif
					// #ifdef MP-ALIPAY
					my.getAuthCode({
						scopes: 'auth_base',
						success(res) {
							resolve(res.authCode)
						},
						fail(err) {
						  reject(err)
						}
					})
					// #endif
				})
			}, 
			getUserInfo(e){
				console.log("getUserInfo",e)
				if(!e.detail.userInfo){
					this.closed();
				}else{
					this.mdata = e.detail.encryptedData;
					this.miv = e.detail.iv;
					this.step = 1;
				}
				// uni.navigateTo({
				// 	url:'/pages/login/login'
				// })
			},
			closed(){
				this.show = false;
				setTimeout(()=>{
					this.$emit('closed');
				},400);
			}
		}
	}
</script>

<style>
	.login-modal{
		position: relative;
		z-index: 400;
	}
	.login-modal .modal-bg{
		position: fixed;
		z-index: 400;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,.5);
	}
	.login-modal .modal-box{
		position: fixed;
		z-index: 401;
		background:#FFFFFF;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom:0rpx;
		padding-bottom:constant(safe-area-inset-bottom);
		padding-bottom:env(safe-area-inset-bottom);
		border-radius:32rpx 32rpx 0rpx 0rpx;
	}
	.login-modal .modal-main{
		position: relative;
		height: auto;
		overflow: hidden;
		min-height: 800rpx;
		padding-top: 64rpx;
		padding-bottom: 40rpx;
	}
	.login-modal .modal-main .closed{
		position: absolute;
		right: 40rpx;
		top: 40rpx;
	}
	
</style>